<template>
  <div class="app_template">
    <el-row :gutter="10">
      <el-col
        style="margin-bottom: 10px"
        :span="12"
        :offset="0"
        v-for="item in productionList"
        :key="item.id"
      >
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <div class="flex-x flex-space">
              <div>{{ item.name }}</div>

              <div>
                <el-button type="text" @click="handlePeview(item)"
                  >预览</el-button
                >
                <el-button type="text" @click="jcreateProductionProject(item)"
                  >创建</el-button
                >
              </div>
            </div>
          </div>
          <img
            :src="jiemaKey + '/' + item.cover"
            alt=""
            style="width: 100%; height: 100%"
          />
        </el-card>
      </el-col>
    </el-row>
    <!-- <PreviewApp :imgs="imgs" :dialogVisible.sync="dialogVisible"></PreviewApp> -->
    <el-image-viewer
      v-if="showViewer"
      :on-close="
        () => {
          showViewer = false;
        }
      "
      :url-list="imgs"
    />
  </div>
</template>
<script>
import PreviewApp from "./PreviewApp.vue";
import elImageViewer from "element-ui/packages/image/src/image-viewer";

import { JIEMA } from "@/utils/local";
export default {
  components: { PreviewApp, elImageViewer },
  props: {
    productionList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogVisible: false,
      baseUrl: process.env.VUE_APP_JIEMA_URL,
      jiemaKey: JIEMA,
      imgs: [],
      showViewer: false,
    };
  },
  methods: {
    jcreateProductionProject(id) {
      this.$emit("jcreateProductionProject", id);
    },
    handlePeview(item) {
      let imgs = JSON.parse(item.imgs);
      imgs.unshift(item.cover);
      this.imgs = imgs.map((item) => {
        return JIEMA + "/" + item;
      });

      this.showViewer = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.app_template {
  /deep/ .el-card__header {
    padding: 10px;
  }
}
</style>